<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <base th:href="${#httpServletRequest.getContextPath()}">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../../static/layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script th:src="@{/layui/layui.js}" src="../../static/layui/layui.js"></script>
</head>
<body style="width: 99%">

<table class="layui-hide" id="test" lay-filter="test"></table>
</body>

<script th:inline="javascript">
    window.id = [[${id}]];
</script>

<script th:inline="none">

    layui.use('table', function () {
        // 数据表单时间戳转换为日期显示
        function DateFormat(sjc) {
            const date = new Date(sjc);
            const y = date.getFullYear();
            let m = date.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            let d = date.getDate();
            d = d < 10 ? ("0" + d) : d;
            return y + "-" + m + "-" + d;
        }

        const table = layui.table;
        table.render({
            id: 'table',
            elem: '#test'
            , url: '/student/get/course/results.json?id=' + window.id
            , toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { // 自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '成绩表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'studentName', title: '姓名', width: 150, fixed: 'left', unresize: true}
                , {field: 'courseName', title: '课程名', width: 150, fixed: 'left', unresize: true}
                , {field: 'score', title: '课程分数', width: 120, sort: true}
                , {
                    field: 'courseDate',
                    title: '修课时间',
                    width: 150,
                    sort: true,
                    templet: function (res) {
                        return DateFormat(res.courseDate);
                    }
                }
                , {field: 'remark', title: '备注'}
            ]]
        });

        // 头工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这里什么都没有');
                    break;
            }
        });
    })
</script>
</html>